---
title: Highlight
description: Used to highlight substrings of a text.
links:
  source: components/highlight
  storybook: components-highlight--basic
  recipe: highlight
  ark: https://ark-ui.com/react/docs/utilities/highlight
---

<ExampleTabs name="highlight-basic" />

## Usage

```jsx
import { Highlight } from "@chakra-ui/react"
```

```jsx
<Highlight query="Hello">Hello World</Highlight>
```

## Examples

### Multiple

Pass an array of strings to the `query` prop to highlight multiple substrings.

<ExampleTabs name="highlight-multiple" />

### Custom Style

Use the `styles` prop to customize the style of the highlighted text.

<ExampleTabs name="highlight-with-custom-style" />

### Search Query

Use the highlight component to highlight search query results.

<ExampleTabs name="highlight-search-query" />

## Props

<PropTable component="Highlight" part="Highlight" />
